<template>
	<div
		class="cl-popup__wrapper"
		:class="[
			`cl-popup__wrapper--${direction}`,
			{
				'is-show': visible
			}
		]"
		v-if="forceUpdate ? visible : true"
	>
		<div class="cl-popup__modal" @click="modalClose"></div>

		<div :class="['cl-popup']" :style="{ height, width }">
			<div class="cl-popup__container">
				<slot></slot>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		visible: Boolean,
		beforeClose: Boolean,
		direction: {
			type: String,
			default: 'left'
		},
		wrapperClosable: {
			type: Boolean,
			default: true
		},
		size: {
			type: String,
			default: 'auto'
		},
		forceUpdate: {
			type: Boolean,
			default: true
		}
	},

	computed: {
		height() {
			switch (this.direction) {
				case 'top':
				case 'bottom':
				case 'center':
					return this.size;
				case 'left':
				case 'right':
					return '100%';
			}
		},

		width() {
			switch (this.direction) {
				case 'top':
				case 'bottom':
					return '100%';
				case 'left':
				case 'right':
				case 'center':
					return this.size;
			}
		}
	},

	watch: {
		visible(val) {
			if (!val) {
				this.$emit('update:visible', false);
			}

			if (this.direction == 'bottom') {
				this.$store.commit('SET_SELECT', { key: 'showFooterBar', value: !val });
			}
		}
	},

	methods: {
		close() {
			if (this.beforeClose) {
				this.$emit('close', () => {
					this.$emit('update:visible', false);
				});
			} else {
				this.$emit('update:visible', false);
				this.$emit('close');
			}
		},

		modalClose() {
			if (!this.wrapperClosable) {
				return false;
			}

			this.close();
		}
	}
};
</script>

<style lang="scss" scoped>
.cl-popup__wrapper {
	z-index: 300;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0;
	transition: all 0.3s;
	pointer-events: none;

	&.is-show {
		opacity: 1;
		pointer-events: auto;

		.cl-popup {
			transition: all 0.4s;
			transform: translate(0, 0);
		}
	}

	&::after {
		content: '';
		display: inline-block;
		height: 100%;
		width: 0;
		vertical-align: middle;
	}

	.cl-popup__modal {
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.cl-popup {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		overflow: hidden;
		position: fixed;
		transition: all 0.3s;

		&__container {
			padding: 20px;
			flex: 1;
			overflow: auto;
			box-sizing: border-box;
		}
	}

	&--left {
		.cl-popup {
			transform: translateX(-100%);
			top: 0;
			left: 0;
		}
	}

	&--right {
		.cl-popup {
			transform: translateX(100%);
			right: 0;
			top: 0;
		}
	}

	&--top {
		.cl-popup {
			transform: translateY(-100%);
			left: 0;
			top: 0;
		}
	}

	&--bottom {
		.cl-popup {
			transform: translateY(100%);
			left: 0;
			bottom: 0;
			padding-bottom: env(safe-area-inset-bottom);
		}
	}

	&--center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.cl-popup {
			transform: scale(1.3);
		}
	}
}
</style>
